<template>
  <div class="wrap">

    <ItemContainer ref="GroupSetting"
                   resourceUri="group/setting"
                   :resourceId="resourceData.id"
                   resourceName="setting"
                   @fetched="onFetched"
                   @posted="onPosted"
                   @patched="onPosted">
      <div slot="dataView">
        <el-form ref="form" :model="resourceData" label-width="130px">
          <el-form-item label="地区">
            <RegionAddress ref="RegionAddress"
                           @provinceChanged="onProvinceChanged"
                           @cityChanged="onCityChanged"
                           @districtChanged="onDistrictChanged">
            </RegionAddress>
          </el-form-item>

          <el-form-item label="名称" v-if="!showMode">
            <el-input class="group-group-input" v-model="resourceData.name" size="small" placeholder="拼团名称"></el-input>
          </el-form-item>

          <el-form-item label="男性免费名额">
            <el-input class="group-group-input" v-model="resourceData.male_free" size="small" placeholder="男性免费名额" type="number"></el-input>
          </el-form-item>

          <el-form-item label="男已使用免费名额">
            {{resourceData.male_free_left}}
          </el-form-item>

          <el-form-item label="女性免费名额">
            <el-input class="group-group-input" v-model="resourceData.female_free" size="small" placeholder="女性免费名额" type="number"></el-input>
          </el-form-item>

          <el-form-item label="女已使用免费名额">
            {{resourceData.female_free_left}}
          </el-form-item>

          <el-form-item label="成团人数">
            <el-input class="group-group-input" v-model="resourceData.being_group" size="small" placeholder="成团人数" type="number"></el-input>
          </el-form-item>

          <el-form-item label="价格">
            <el-input class="group-group-input" v-model="resourceData.price" size="small" placeholder="价格" type="number"></el-input>
          </el-form-item>

          <el-form-item v-if="showMode" label="创建时间">
            {{resourceData.creatime | formatDatetime}}
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="goTo">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </ItemContainer>

  </div>
</template>

<script>
  import ItemContainer from '../ItemContainer.vue'
  import RegionAddress from '../Address/Address.vue'
  import Moment from 'moment'
  export default {
    data () {
      return {
        resourceData: {
          id: null,
          name: null,
          province: null,
          city: null,
          district: null,
          male_free: null,
          male_free_left: null,
          female_free: null,
          femail_free_left: null,
          being_group: null,
          price: null,
          creatime: Moment().format('YYYY-MM-DD HH:mm:ss')
        }
      }
    },
    props: ['resourceId'],
    computed: {
      showMode () {
        if (this.$router.currentRoute.name === 'group_setting.edit') {
          return true
        } else return false
      }
    },
    filters: {
      formatDatetime (unix) {
        return Moment(unix, 'X').format('YYYY-MM-DD HH:mm:ss')
      }
    },
    methods: {
      goTo () {
        this.$router.push({name: 'group_setting.list'})
      },
      onFetched (data) {
        console.log(data)
        data.male_free = data.male_free_nums
        data.male_free_left = data.male_free_nums - data.male_free_left_nums
        data.female_free = data.female_free_nums
        data.female_free_left = data.female_free_nums - data.female_free_left_nums
        data.being_group = data.being_group_nums
        this.$refs.RegionAddress.reset = false
        this.$refs.RegionAddress.regionValue = {
          province: data.province.id,
          city: data.city.id,
          district: data.district.id
        }
        this.resourceData = data
      },
      onProvinceChanged (value) {
        this.resourceData.province = value
      },
      onCityChanged (value) {
        this.resourceData.city = value
      },
      onDistrictChanged (value) {
        this.resourceData.district = value
      },
      onPosted (data) {
        console.dir(data)
        data.male_free = data.male_free_nums
        data.female_free = data.female_free_nums
        data.being_group = data.being_group_nums
        this.$refs.RegionAddress.reset = false
        this.$refs.RegionAddress.regionValue = {
          province: data.province.id,
          city: data.city.id,
          district: data.district.id
        }

        this.resourceData = data
        if (this.$router.currentRoute.name === 'group_setting.add') {
          this.goTo()
        }
      },
      onSubmit (event) {
        console.log(event, this.resourceData)

        // 不能为空
        if (!this.resourceData.province) {
          this.$message('请选择省份')
          return false
        }
        if (!this.resourceData.city) {
          this.$message('请选择城市')
          return false
        }
        if (!this.resourceData.district) {
          this.$message('请选择辖区')
          return false
        }
        if (!this.resourceData.name) {
          this.$message('请输入名称')
          return false
        }
        if (this.resourceData.male_free < this.resourceData.male_free_left) {
          this.$message('男性免费名额不能小于男已使用免费名额')
          return false
        }
        if (this.resourceData.female_free < this.resourceData.female_free_left) {
          this.$message('女性免费名额不能小于女已使用免费名额')
          return false
        }
        if (!this.resourceData.being_group) {
          this.$message('请填写成团人数')
          return false
        }
        if (!this.resourceData.price) {
          this.$message('请填写价格')
          return false
        }
        if (this.resourceData.id) {
          let data = {}
          data.province = this.resourceData.province
          data.city = this.resourceData.city
          data.district = this.resourceData.district
          data.male_free = this.resourceData.male_free
          data.female_free = this.resourceData.female_free
          data.female_free = this.resourceData.female_free
          data.being_group = this.resourceData.being_group
          data.price = this.resourceData.price
          data.name = this.resourceData.name

          this.$refs.GroupSetting.patchData(data)
          this.goTo()
        } else this.$refs.GroupSetting.postData(this.resourceData)
      }
    },
    components: {
      ItemContainer,
      RegionAddress
    },
    created () {
      this.resourceData.id = this.$route.params.setting_id
    }
  }
</script>

<style lang="css">
  .group-group-input {
    width: 200px;
  }
</style>
